<template>
    <div class="app-container">
      <div class="head">
        <el-form :model="queryParams" ref="queryForm" :inline="true">
          <el-form-item label="邀请人查询：" prop="">
            <el-input v-model="queryParams.query" placeholder="姓名\手机号" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="listBox">
        <div class="listBox_head">
          <el-button type="primary" style="margin: 10px 0 20px" @click="addClick">新增邀请人</el-button>
        </div>
        <el-table v-loading="loading" :data="tabList" stripe border>
          <el-table-column label="序号" align="center" type="index" width="64px" />
          <el-table-column label="姓名" align="center" prop="name"></el-table-column>
          <el-table-column label="手机号" align="center" prop="phone" ></el-table-column>
          <el-table-column label="邀请码" align="center" prop="referrer" ></el-table-column>
          <el-table-column label="备注" align="center" prop="remark" ></el-table-column> 
          <el-table-column label="邀请神椰商户数量" align="center" prop="shenyeMerchantTotal" ></el-table-column>
          <el-table-column label="邀请卡优优商户数量" align="center" prop="kyyMerchantTotal" ></el-table-column>

          <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="editClick(scope.row)">编辑</el-button>
              <el-button size="mini" type="text" @click="exportClick(scope.row)">导出神椰邀请码</el-button>
              <el-button size="mini" type="text" @click="exportKyyClick(scope.row)">导出卡优优邀请码</el-button>

            </template>
          </el-table-column>
        </el-table>
  
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList"></pagination>
      </div>
      <Dialog :id="dialogId" v-bind="$attrs" v-if="dialogVisible" :visible.sync="dialogVisible" @success="_handleSuccess">
      </Dialog>
    </div>
  </template>
  
  <script>
    import { referrerList,referrerDownQrcode,referrerDownChannel } from "@/api/consumeMiningManagement/inviterManagement";
    import Dialog from "@/views/inviterManagement/components/dialog.vue";

    export default {
      name: "",
      components: {
        Dialog
      },
      data() {
        return {
          dialogId: '',
          dialogVisible: false,
          // 遮罩层
          loading: false,
          // 导出遮罩层
          // 总条数
          total: 0,
          //表格数据
          tabList: [],
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            query: '', //行业名称
          }
        };
      },
      created() {
        this.getList();
      },
      methods: {
        /** 查询列表 */
        getList() {
          this.loading = true;
          referrerList(this.queryParams).then(response => {
            this.tabList = response.result.records;
            this.total = response.result.total;
            console.log(this.total)
            this.loading = false;
          });
        },
        // 表单重置
        reset() {
          this.queryParams = {
            pageNum: 1,
            pageSize: 10,
            query: '', //行业名称
          };
          // this.resetForm("form");
          this.handleQuery()
        },
        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
          // this.resetForm("queryForm");
          this.reset();
          this.handleQuery();
        },
        // 导出神椰邀请码
        exportClick(item){
           const loading = this.$loading({
              lock: true,
              text: '数据加载中。。。',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
          });
          referrerDownQrcode(item.id).then(response => {
              setTimeout(() => {
                this.saveBas64Img(response.result,(item.name+'邀请码'))
                loading.close();
                this.$message({ message: "下载成功", type: "success" });
              }, 1000);
            
          }).catch(error=>{
              loading.close();
          });

        },
        // 导出卡优优邀请码
        exportKyyClick(item){
           const loading = this.$loading({
              lock: true,
              text: '数据加载中。。。',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
          });
          referrerDownChannel(item.id).then(response => {
              setTimeout(() => {
                this.saveBas64Img(response.result,(item.name+'邀请码'))
                loading.close();
                this.$message({ message: "下载成功", type: "success" });
              }, 1000);
            
          }).catch(error=>{
              loading.close();
          });

        },
        saveBas64Img (url, name) {
          let base64 = url.toString()
          let byteCharacters = atob(
            base64.replace(/^data:image\/(png|jpeg|jpg);base64,/, "")
          )
          let byteNumbers = new Array(byteCharacters.length)
          for (let i = 0; i < byteCharacters.length; i++) {
            byteNumbers[i] = byteCharacters.charCodeAt(i)
          }
          let byteArray = new Uint8Array(byteNumbers)
          let blob = new Blob([byteArray], {
            type: undefined
          })
          let aLink = document.createElement("a")
          aLink.download = `${name}.png` //这里写保存时的图片名称
          aLink.href = URL.createObjectURL(blob)
          aLink.click()
       },
        //新增
        addClick() {
          this.dialogId = null
          this.dialogVisible = true;
        },
        // 编辑
        editClick(row) {
          this.dialogId = row.id
          this.dialogVisible = true;
        },
        _handleSuccess(e) {
          //成功回调
          // this.resetQuery()
          this.getList()
        },
      }
    };
  
  </script>
  <style scoped>
    .head {
      box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
      background-color: #fff;
      border-radius: 8px;
      padding: 20px 20px 0;
    }
  
    .listBox {
      box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
      background-color: #fff;
      border-radius: 8px;
      padding: 20px 20px;
      margin-top: 10px;
    }
  
    .listBox_head {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  
    .img_box {
      width: 100px;
      height: 80px;
      border-radius: 4px;
    }
  
  </style>
  